<template>
  <div class="home">
    <van-card
      num="2"
      price="2.00"
      desc="描述信息"
      title="商品标题"
      thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
    >
    123
    </van-card>
<van-card
  num="2"
  price="10.00"
  desc="描述信息"
  title="商品标题"
  thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
/>
<van-card
  num="2"
  price="22.00"
  desc="描述信息"
  title="商品标题"
  thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
/>
    <Button>
      <Item>
        <div @click="onClick" class="item_container">
          <van-icon name="circle" style="width:100%;display:flex;align-items: center; justify-content: center;"/>
       <div>标签</div>
        </div> 
        </Item>
      <Item>
        <van-icon name="circle" style="width:100%;display:flex;align-items: center; justify-content: center;"/>
        标签</Item>
      <Item>
        <van-icon name="circle" style="width:100%;display:flex;align-items: center; justify-content: center;"/>
        标签</Item>
      <Item>
        <van-icon name="circle" style="width:100%;display:flex;align-items: center; justify-content: center;"/>
        标签</Item>
    </Button>
  </div>
</template>

<script>
import Vue from 'vue';
import { Icon } from 'vant';
Vue.use(Icon);

import { Card } from 'vant';
Vue.use(Card);
import Button from "../components/Buttom";
import Item from "../components/Item";
export default {
  name: 'Home',
  components: {
    Button,
    Item
  },
  methods:{
    onClick(){
      this.$router.push("/about")
    }
  }
}
</script>
<style>
  .item_container
  {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }
</style>
